<script setup lang="ts"></script>

<template>
  <div h-full bg-black flex="~">
    <div
      flex="~ row lg:col"
      justify-evenly
      items-center
      py5
      lg:px5
      border="t lg:r base"
    >
      <div font-bold flex="~ col gap-10">
        <!-- <NuxtLink v-slot="{ isActive }" to="/" title="首页">
          <div
            text-2xl
            :class="isActive ? 'i-ph-house-fill text-primary' : 'i-ph-house'"
          />
        </NuxtLink> -->
        <NuxtLink v-slot="{ isActive }" to="/movie" title="电影">
          <div
            text-2xl
            :class="
              isActive ? 'i-ph-film-strip-fill text-primary' : 'i-ph-film-strip'
            "
          />
        </NuxtLink>
        <NuxtLink v-slot="{ isActive }" to="/tv" title="电视剧">
          <div
            text-2xl
            :class="
              isActive
                ? 'i-ph-television-simple-fill text-primary'
                : 'i-ph-television-simple'
            "
          />
        </NuxtLink>
        <NuxtLink v-slot="{ isActive }" to="/anime" title="动漫">
          <div
            text-2xl
            :class="
              isActive
                ? 'i-ph:twitter-logo-fill text-primary'
                : 'i-ph:twitter-logo'
            "
          />
        </NuxtLink>
        <NuxtLink v-slot="{ isActive }" to="/search" title="动漫">
          <div
            text-2xl
            :class="
              isActive
                ? 'i-ph-magnifying-glass-fill text-primary'
                : 'i-ph-magnifying-glass'
            "
          />
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
